<template>
	<view>
		<view class="mation_odr">
			<view class="mation_teltl">订单信息</view>
			<view class="mation_centen">
				<view class="order_tilet">
					<view class="order_name">订单名称</view>
					<view class="order_text">【海峡阳光旅游社团】精品黔灵山一日游，领略不一样的贵阳</view>
				</view>
				<view class="order_tilet">
					<view class="order_name">金额</view>
					<view class="order_text">￥5000.00</view>
				</view>
				<view class="order_tilet">
					<view class="order_name">订单号</view>
					<view class="order_text">ANFS4U549856</view>
				</view>
				<view class="order_tilet">
					<view class="order_name">下单时间</view>
					<view class="order_text">2019/8/8 18:00:24</view>
				</view>
			</view>
		</view>
		<view class="mation_odr">
			<view class="mation_teltl">退款申请</view>
			<view class="mation_centen">
				<view class="order_money">
					<view class="order_name">退款金额： </view>
					<view class="input_order">
						<view>￥</view>
						<input type="number" value="" placeholder="请输入退款金额"/>
					</view>
				</view>
				<view class="order_area">
					<view class="order_name">退款原因</view>
					<textarea type="text" maxlength="200" value="" placeholder="请输入退款原因" />
				</view>
			</view>
		</view>
		<view class="refund_Apply" @click="refund_tz">申请退款</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			refund_tz(){
				uni.navigateTo({
					url:'../hotelorder'
				})
			}
		}
	}
</script>

<style>
	page{
		background: #f6f6f6;
	}
	.refund_Apply{
		width: 94%;
		padding: 15upx 0;
		font-size: 34upx;
		color: #fff;
		background: #13b1eb;
		border-radius: 10upx;
		text-align: center;
		margin: 0 auto;
	}
	.order_area{
		padding: 15upx 0upx;
	}
	.order_area textarea{
		width: 100%;
		margin-top: 12upx;
		font-size: 32upx;
		height: 200upx;
	}
	.order_money{
		display: flex;
		padding: 20upx 0upx 20upx 0;
		border-bottom: 1upx solid #ededed;
	}
	.input_order{
		display: flex;
		width: 72%;
	}
	.input_order input{
		width: 90%;
		font-size: 32upx;
		margin-left: 5upx;
	}
	.input_order view{
		color: #333;
		font-size: 34upx;
	}
	.order_tilet{
		display: flex;
		justify-content: space-between;
		padding: 12upx 0;
	}
	.order_name{
		font-size: 32upx;
		color: #333;
	}
	.order_text{
		font-size: 30upx;
		color: #777;
		width: 68%;
		text-align: right;
	}
	.mation_centen{
		width: 94%;
		padding: 14upx 3%;
		background: #fff;
		border-top: 1upx solid #ededed;
		border-bottom: 1upx solid #ededed;
	}
	.mation_teltl{
		font-size: 34upx;
		margin-left: 3%;
		margin-bottom: 12upx;
		width: 30%;
	}
	.mation_odr{
		width: 100%;
		padding: 24upx 0;
	}
	.mation_odr view{
		line-height: 1.4;
	}
	.mation_odr text{
		line-height: 1.4;
	}
</style>
